<template>
  <div class="dashboard-container">
    <github-corner class="github-corner" />
    <div class="dashboard-text">用户名:{{ name }}</div>
    <div class="dashboard-text-small">
      用户角色:<span v-for="role in roles" :key="role">{{
        role ? role : "网站管理员"
      }}</span>
    </div>
    <el-row style="background: #fff; padding: 16px 16px 0; margin: 32px 0">
      <div
        id="chart"
        class="chart"
        ref="chart"
        style="height: 500px; width: 100%"
      />
    </el-row>
    <el-row :gutter="8" type="flex">
      <el-col
        :xs="{ span: 12 }"
        :sm="{ span: 12 }"
        :md="{ span: 12 }"
        :lg="{ span: 18 }"
        :xl="{ span: 18 }"
        style="margin-bottom: 30px"
      >
        <todo-list />
      </el-col>
      <el-col
        :xs="{ span: 12 }"
        :sm="{ span: 12 }"
        :md="{ span: 12 }"
        :lg="{ span: 6 }"
        :xl="{ span: 6 }"
        style="margin-bottom: 30px"
      >
        <box-card />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import echarts from "echarts";
import statistic from "@/api/statistic";
import GithubCorner from "@/components/GithubCorner";
import TodoList from "./components/TodoList";
import BoxCard from "./components/BoxCard";
import moment from "moment";

export default {
  name: "Dashboard",
  props: {
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapGetters(["name", "roles"]),
  },
  components: {
    GithubCorner,
    TodoList,
    BoxCard,
  },
  data() {
    return {
      begin: "",
      end: "",
      charName: "近一个月数据统计",
      chartList: [
        {
          title: "学员注册数统计",
          type: "login_num",
          xData: [],
          yData: [],
        },
        {
          title: "学员登录数统计",
          type: "register_num",
          xData: [],
          yData: [],
        },
        {
          title: "课程播放数统计",
          type: "video_view_num",
          xData: [],
          yData: [],
        },
        {
          title: "每日课程数统计",
          type: "course_num",
          xData: [],
          yData: [],
        },
      ],
    };
  },
  created() {
    // 获取图表中的所有数据yData列表
    for (let i = 0; i < this.chartList.length; i++) {
      this.initChartData(i, this.chartList[i].type);
    }
  },
  methods: {
    // 准备图表数据
    initChartData(i, type) {
      // 获取当前时间
      const end = moment().format("yyyy-MM-DD HH:mm:ss");
      // 获取一个月前的时间
      const begin = moment()
        .subtract(1, "months")
        .format("yyyy-MM-DD HH:mm:ss");
      // 范围设置在最近一个月
      statistic.showChart({ type, begin, end }).then((response) => {
        // 数据
        this.chartList[i].yData = response.data.numDataList;
        // 横轴时间
        this.chartList[i].xData = response.data.date_calculatedList;
        console.log(this.chartList[i]);
        this.setChart();
      });
    },

    // 设置图标参数
    setChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById("chart"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: this.charName,
        },
        legend: {
          data: [
            "学员注册数统计",
            "学员登录数统计",
            "课程播放数统计",
            "每日课程数统计",
          ],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: "axis",
        },
        dataZoom: [
          {
            show: true,
            height: 30,
            xAxisIndex: [0],
            bottom: 30,
            start: 10,
            end: 80,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],

        // x轴是类目轴（离散数据）,必须通过data设置类目数据
        xAxis: {
          type: "category",
          data: this.chartList[0].xData,
        },
        // y轴是数据轴（连续数据）
        yAxis: {
          type: "value",
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
          {
            name: this.chartList[0].title,
            itemStyle: {
              normal: {
                color: "#D75644",
                lineStyle: {
                  color: "#D75644",
                  width: 2,
                },
              },
            },
            smooth: true,
            type: "line",
            data: this.chartList[0].yData,
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
          {
            name: this.chartList[1].title,
            smooth: true,
            type: "line",
            itemStyle: {
              normal: {
                color: "#3888fa",
                lineStyle: {
                  color: "#3888fa",
                  width: 2,
                },
              },
            },
            data: this.chartList[1].yData,
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
          {
            name: this.chartList[2].title,
            itemStyle: {
              normal: {
                color: "#6AC6C5",
                lineStyle: {
                  color: "#6AC6C5",
                  width: 2,
                },
              },
            },
            smooth: true,
            type: "line",
            data: this.chartList[2].yData,
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
          {
            name: this.chartList[3].title,
            itemStyle: {
              normal: {
                color: "#334154",
                lineStyle: {
                  color: "#334154",
                  width: 2,
                },
              },
            },
            smooth: true,
            type: "line",
            data: this.chartList[3].yData,
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    background-color: rgb(240, 242, 245);
    position: relative;
    padding: 32px;
    .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    }
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.chart-container {
  display: flex;
  flex-wrap: wrap;
}

.dashboard-text {
  color: #1f2f3d;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  font-size: 28px;
}

.dashboard-text-small {
  color: #657183;
  font-size: 18px;
}
</style>
